<template>
	<!-- 底部效果  -->
	<el-footer style="background-color: black;height: 720px;padding-top: 1px;">
		<div style="margin: 0 auto;width: 50%;">

			<el-row :gutter="20" style="margin-top: 30px;">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
			</el-row>
			
			<el-divider></el-divider>

			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>About Change</span>
						<p>本店商品均为易碎品，非质量问题谢绝退换，如有质量问题，本店承担运费调换</p>
					</div>
				</el-col>
			</el-row>
			
			<el-divider></el-divider>
			
			<div style="text-align: center;">
				<span style="color: #FFFFFF;font-size: 13px;">Copyright © 2010-2017</br>花品主义</span>
			</div>
		</div>

	</el-footer>
</template>

<script>
	export default {
		// 这里的name不影响导入使用
		name:"newFooter",
		data() {
			return {
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvY2ExMzNmNDdmYThiZWQ2MmUxNTA5NGFjNDcyYjc0ZDYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp',

			}
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style scoped="scoped">
	.el-row .el-col span {
		font-size: 18px;
		color: #F9FAFC;
	}

	.el-row .el-col p {
		font-size: 12px;
		color: #F9FAFC;
		margin-top: 10px;
		line-height: 200%
	}

	.el-row {
		margin-top: 40px;
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.row-bg {
		padding: 20px 0;
		background-color: #f9fafc;
	}

	/* .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  } */
</style>
